import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './newshomepage.css'
import { AtGrid, AtList, AtListItem, AtSearchBar, AtSwipeAction, AtTabBar } from 'taro-ui'
import app from '../../../main.js'

export default class NewsHomepage extends Taro.Component {

  config = {
    navigationBarTitleText: '消息主页'
  }

  constructor() {
    super(...arguments)
    this.state = {
      value: '',
      tbar_current: 1
    }
  }

  onChange(value) {
    this.setState({
      value: value
    })
  }

  handleClick (value) {
    this.setState({
      tbar_current: value
    })
    if (value == 0) {
      app.redirectTo('../homepage/homepage');
    } else if (value == 2) {
      app.redirectTo('../../center/pages/personalcenter/personalcenter');
    }
  }

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  go(url) {
    app.navigateTo(url);
  }

  clickGrid(item, index) {
    if (index === 0) {
      app.navigateTo('../systemnewslist/systemnewslist');
    } 
    else {
      app.navigateTo('../addresslist/addresslist');
    }
  }

  render() {
    return (
      <View className='news-homepage'>
        <AtSearchBar
          value={this.state.value}
          onChange={this.onChange.bind(this)}
        />
        <AtGrid onClick={this.clickGrid} mode='rect' className='mess-btn' columnNum={2} data={
          [
            {
              image: app.imageUri + 'img/xitongxinxi.png',
              value: '系统消息'
            },
            {
              image: app.imageUri + 'img/tongxunlv.png',
              value: '通讯录'
            }
          ]
        } />
        <AtList>
          <AtSwipeAction options={[
            {
              text: '取消',
              style: {
                backgroundColor: '#6190E8'
              }
            },
            {
              text: '删除',
              style: {
                backgroundColor: '#FF4949'
              }
            }
          ]}>
            <AtListItem onClick={this.go.bind(this, '../dialog/dialog')} className="alist" title='陈溪北' note='怎么' extraText='昨天' thumb={app.imageUri + 'img/d3.jpg'} />
          </AtSwipeAction>
          <AtSwipeAction options={[
            {
              text: '取消',
              style: {
                backgroundColor: '#6190E8'
              }
            },
            {
              text: '删除',
              style: {
                backgroundColor: '#FF4949'
              }
            }
          ]}>
            <AtListItem onClick={this.go.bind(this, '../dialog/dialog')} className="alist" title='及新桥' note='你好' extraText='15:35' thumb={app.imageUri + 'img/d2.jpg'} />
          </AtSwipeAction>
          <AtSwipeAction options={[
            {
              text: '取消',
              style: {
                backgroundColor: '#6190E8'
              }
            },
            {
              text: '删除',
              style: {
                backgroundColor: '#FF4949'
              }
            }
          ]}>
            <AtListItem onClick={this.go.bind(this, '../dialog/dialog')} className="alist" title='黄昌隆' note='还是可以的' extraText='12月5日 12:20' thumb={app.imageUri + 'img/d3.jpg'} />
          </AtSwipeAction>
        </AtList>
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', iconType: 'home' },
            { title: '消息', iconType: 'mail' },
            { title: '我的', iconType: 'user' }
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.tbar_current}
        />
      </View>
    )
  }
}
